<template>
    <h1>API</h1>
  <el-row class="mb-4">
    <b>属性</b>
    <table width="100%">
        <tr>
          <th width="15%">属性名</th>
          <th>说明</th>
          <th width="15%">类型</th>
          <th width="15%">默认值</th>
        </tr>
        <tr v-for="item in attrs">
          <td>{{item.name}}</td>
          <td>{{item.desc}}</td>
          <td>{{item.type}}</td>
          <td>{{item.defaultValue}}</td>
        </tr>
      </table>
      <b>Slots</b>
    <table width="100%">
      <tr>
          <th width="30%">名称</th>
          <th>说明</th>
      </tr>
      <tr v-for="item in slots">
          <td>{{item.name}}</td>
          <td>{{item.desc}}</td>
      </tr>
    </table>
  </el-row>
    <el-row class="mb-4">
        <el-text class="mx-1">Default</el-text>
        <el-text class="mx-1" type="primary">Primary</el-text>
        <el-text class="mx-1" type="success">Success</el-text>
        <el-text class="mx-1" type="info">Info</el-text>
        <el-text class="mx-1" type="warning">Warning</el-text>
        <el-text class="mx-1" type="danger">Danger</el-text>
    </el-row>
    <el-row class="mb-4">
        <el-text class="mx-1" size="large">Large</el-text>
        <el-text class="mx-1">Default</el-text>
        <el-text class="mx-1" size="small">Small</el-text>
    </el-row>
    
    <el-text class="w-150px mb-2" truncated>
        通过 truncated 属性，在文本超过视图或最大宽度设置时展示省略符
    </el-text>
    <el-row class="w-150px mb-2">
        <el-text truncated>通过 truncated 属性，在文本超过视图或最大宽度设置时展示省略符</el-text>
    </el-row>
    <el-text line-clamp="2">
        The -webkit-line-clamp CSS property<br />
        allows limiting of the contents of<br />
        a block to the specified number of lines.
    </el-text>
    <el-row>
        <el-space direction="vertical">
            <el-text>span</el-text>
            <el-text tag="p">This is a paragraph.</el-text>
            <el-text tag="b">Bold</el-text>
            <el-text tag="i">Italic</el-text>
            <el-text>
            This is
            <el-text tag="sub" size="small">subscript</el-text>
            </el-text>
            <el-text>
            This is
            <el-text tag="sup" size="small">superscript</el-text>
            </el-text>
            <el-text tag="ins">Inserted</el-text>
            <el-text tag="del">Deleted</el-text>
            <el-text tag="mark">Marked</el-text>
        </el-space>
    </el-row>
    <el-space direction="vertical">
    <el-text>
      <el-icon>
        <ElementPlus />
      </el-icon>
      Element-Plus
    </el-text>
    <el-row>
      <el-text>Rate</el-text>
      <el-rate class="ml-1" />
    </el-row>
    <el-text>
      This is text mixed icon
      <el-icon>
        <Bell />
      </el-icon>
      and component
      <el-button>Button</el-button>
    </el-text>
  </el-space>
</template>
<script setup>
import { Bell, ElementPlus } from '@element-plus/icons-vue'
</script>
<script>
export default{
    data(){
        return {
            attrs:[{
              "name":"type",
              "desc":"类型",
              "type":"枚举[primary|success|warning|danger|info|default]",
              "defaultValue":"default"
            },{
              "name":"size",
              "desc":"大小",
              "type":"枚举[large|defaul|small]",
              "defaultValue":"default"
            },{
              "name":"truncated",
              "desc":"显示省略号",
              "type":"boolean",
              "defaultValue":"false"
            },{
              "name":"line-clamp",
              "desc":"最大行数",
              "type":"string｜number",
              "defaultValue":"-"
            },{
              "name":"tag",
              "desc":"自定义元素标签",
              "type":"string",
              "defaultValue":"span"
            }],
            slots:[{
              "name":"default",
              "desc":"自定义默认内容"
            }]
        }
    }
}
</script>

<style scoped>
.el-text{
    margin-right: 8px;
}
.w-150px {
    width:150px;
}
</style>
